<template>
  <div class="params-info" v-if="isShowComp">
    <!-- 尺码 -->
    <table
      class="info-table info-size"
      v-for="(size, index) in paramsInfo.sizes"
      :key="'size' + index"
    >
      <tr v-for="(tr, x) in size" :key="'tr' + x">
        <td v-for="(td, y) in tr" :key="'td' + y">{{ td }}</td>
      </tr>
    </table>

    <!-- 参数说明 -->
    <table class="info-table info-params">
      <tr v-for="info in paramsInfo.infos" :key="info.key">
        <td class="params-key">{{ info.key }}</td>
        <td class="params-text">{{ info.value }}</td>
      </tr>
    </table>

    <!-- 图片展示: 可能有、可能没有 -->
    <div class="info-img" v-if="isShowImg">
      <img v-lazy="paramsInfo.iamges" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailParamsInfo",

  // 父组件传递参数
  props: {
    paramsInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  // 计算属性
  computed: {
    // 是否显示该组件
    isShowComp() {
      return Object.keys(this.paramsInfo).length != 0;
    },

    // 是否显示图片信息
    isShowImg() {
      return this.paramsInfo.length != 0;
    },
  },
};
</script>

<style lang="less" scoped>
.params-info {
  padding: 20px 15px;
  font-size: 14px;
  border-bottom: 5px solid #f2f5f8;
  // 统一表格样式
  .info-table {
    width: 100%;
    // 合并表格边框
    border-collapse: collapse;
    // 单独为tr设置高度 >>> 撑高表格
    tr {
      height: 42px;
      td {
        border-bottom: 1px solid rgba(100, 100, 100, 0.1);
      }
    }
  }
  .info-size {
    // text-align: center;
    td:nth-child(1) {
      width: 95px;
      // text-align: left;
    }
  }
  // 参数说明
  .info-params {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    .params-key {
      // 注: 当text数据量比较大时, 会挤到key, 所以我们给一个固定宽度
      width: 95px;
    }
    .params-text {
      color: #eb4868;
    }
  }
  // 图片展示
  .info-img img {
    width: 100%;
  }
}
</style>